<template>
<div >
   
    <div class="content">
        <div class="top">
            
        </div>
        <div class="middle">
            <div class="title">{{goodslist.title}}</div>
            市场价：<span class="old">￥{{goodslist.market_price}}</span> &nbsp;&nbsp;&nbsp;现价：<span class="new">￥{{goodslist.sell_price}}</span>
            <br>
            <br>
            <div>
                购买数量：<div class="box">
                <div class="reduce" @click="reducegoods()">-</div>
                <input class = "count" :value="goodscount">
                <div class="add" @click="addgoods()">+</div>
                </div>
            </div>
            <br>
            <div class="buy">立即购买</div>
            <div class="addcar" @click="addcar()">加入购物车</div>
        </div>
        <div class="bottom">
            <p>剩余库存:{{goodslist.stock_quantity}}</p>    
        </div>  
    </div>    
</div>
    
</template>
<script>
export default {
    name:"Goddsinfo",
    data(){
        return{
            goodslist:[],
            id:this.$route.params.id,
            goodscount:1
        }
    },
    created(){
        //  this.getGoodsInfo(),
         this.getGoodsPrice()
    },
    
    methods:{
        getGoodsInfo(){
            this.$axios({
                method:"get",
                url:"http://www.liulongbin.top:3005/api/goods/getdesc/"+this.id
            }).then((res)=>{
                console.log(res.data.message)
                this.goodslist = res.data.message[0]
                // console.log(this.goodslist)
            })
        },
        addgoods(){
            if(this.goodscount == this.goodslist.stock_quantity){
                this.goodscount = this.goodslist.stock_quantity
                return
            }
            this.goodscount++
        },
        reducegoods(){
            if(this.goodscount == 1){
                this.goodscount = 1
                return
            }
            this.goodscount-- 
        },
        getGoodsPrice(){
            this.$axios({
                method:"get",
                url:"http://www.liulongbin.top:3005/api/goods/getinfo/"+this.id
            }).then((res)=>{
                console.log(res.data.message)
                this.goodslist = res.data.message[0]
            })
        },
        addcar(){
            var goodsInfo = {
                id:this.id,
                count:this.goodscount,
                price:this.goodslist.sell_price,
                selected: true
            }
            // console.log(goodsInfo)
            this.$store.commit("addToCar",goodsInfo)
        }
    }
    // watch:{
    //     goodscount:function (newVal,oldVal) {
    //         console.log(newVal+"----"+oldVal)
    //     }
    // }
}
</script>
<style scoped>
html,body{
  margin: 0;
  padding: 0;
}
.content{
    padding: .16rem;
}
    .top{
        height: 4rem;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 0 8px #ccc;
    }
    .middle{
        font-size: .28rem;
        margin-top: 10px;
        height: 4rem;
        width: 100%;
        background-color: #fff;
    }
    .old{
        text-decoration: line-through;
        color: #ccc;
    }
    .new{
        color:red;

    }
    .bottom{
        margin-top: 10px;
        height: 4rem;
        width: 100%;
        background-color: #fff;
    }
    .title{
        margin-bottom: .4rem;
        height: .8rem;
        width: 100%;
        padding: .2rem;
        color: #000;
        font-size: .34rem;
        border-bottom:1px solid #eee; 
    }
    .box {
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;
        border:1px solid #ccc;
    }
    .box div,input{
        text-align: center;
        height: .5rem;
        float: left;
        width: .7rem;
        background-color: #eee;
    }
    .box .count{
        padding:0;
        border-width:0;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background-color: #fff;
    }
    .buy{
        float: left;
        color: #fff;
        border-radius: .06rem;
        margin-left: .4rem;
        text-align: center;
        line-height: .6rem;
        width: 1.6rem;
        height: .6rem;
        background-color:skyblue;
    }
    .addcar{
        float: left;
        color: #fff;
        border-radius: .06rem;
        margin-left: .4rem;
        text-align: center;
        line-height: .6rem;
        width: 1.6rem;
        height: .6rem;
        background-color:pink;
    }
</style>
